<template>
  <section class='welcome'>
    <div class="welcome-nav flex-between">

      <a-button @click="() => { state.count-- }"><icon-left />back</a-button>
      <a-button @click="$router.push('/')">Skip</a-button>
    </div>
    <!-- Vue 模板内容 -->
    <component :is="state.component[state.count].com" />
    <div class="welcome-submit">
      <a-button v-show="state.count < 2" @click="() => { state.count++ }">NEXT</a-button>
      <a-button v-show="state.count === 2" @click="$router.push('/')">GET STARTED</a-button>
    </div>
  </section>
</template>

<script setup lang='ts'>
import WelcomeOne from '@/components/welcome/WelcomeOne.vue';
import WelcomeThree from '@/components/welcome/WelcomeThree.vue';
import WelcomeTwo from '@/components/welcome/WelcomeTwo.vue';
import { reactive, shallowRef } from 'vue'
const state = reactive({
  list: [] as any[],
  count: 0,
  component: [
    { com: shallowRef(WelcomeOne) },
    { com: shallowRef(WelcomeTwo) },
    { com: shallowRef(WelcomeThree) },
  ] as any[],
})
</script>

<style scoped lang="less">
/* 组件样式 */
.welcome {
  position: relative;
  height: 100vh;
  width: 100vw;
  background-color: #352C5D;
  color: aliceblue;

  .welcome-nav,
  .welcome-submit {
    position: absolute;
    width: 100%;
  }

  .welcome-nav {
    top: 0;

    button {
      background-color: transparent;
      color: inherit;
    }
  }

  .welcome-submit {
    position: absolute;
    bottom: 10%;
    width: 100%;
    text-align: center;

    button {
      width: 60%;
      background: linear-gradient(to right, rgb(251, 143, 102), rgb(112, 51, 255));
      border-radius: .1rem;
      border: none;
      color: inherit;
    }
  }
}
</style>